/**
 * 多端全局css
 */

@charset "utf-8";

@font-face {
  font-family: 'sf-pro-text_regular';
  font-style: normal;
  font-weight: 400;
  src: local('☺︎'), url('../font/sf-pro-text_regular.woff2') format('woff2');
}

:root {
  --color-theme: transparent;
  --color-primary: #1890ff;
  --color-dark: #343a40;
  --color-gray: #666;
  --color-gray_dark: #999;
  --color-gray_light: #cccc;
  --color-gray_shallow: #eee;
  --color-white: #fff;
  /* 导航 */
  --color-red_shallow: #f17559;
  --color-yellow_shallow: #f2b25b;
  --color-golden: #f0dc59;
  --color-silver_yellow: #bbf15b;
  --color-violetred: #59e5f2;
  --color-blue: #5b9ff2;
  --color-purple: #6c59f1;

  /* 备用选项 */
  --color-main-background: #f8f8f9;
  --color-border: #e9eaed;
  --color-indigo: #6610f2;
  --color-pink: #e83e8c;
  --color-orange: #fd7e14;
  --color-yellow: #ffc107;
  --color-green: #28a745;
  --color-teal: #20c997;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-light: #f8f9fa;
}

:not(span) {
  color: var(--color-gray);
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: var(--color-gray_dark);
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--color-gray_dark);
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--color-gray_dark);
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: var(--color-gray_dark);
}

body {
  /* 开启硬件加速，让3d动画更流畅，防止页面出现空白/闪烁 */
  /* 该方法影响子元素position:fixed定位 */
  /* -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); */
}

strong,
b {
  font-size: 115%;
  font-weight: bold;
  line-height: 2.4;
}

img[src=''],
img:not([src]) {
  display: none;
}

/* 包含required的表单 */
input:required,
input:valid,
input:invalid {
  color: #333;
}

xmp {
  display: initial;
}

.log-text .beCareful {
  font-size: 95%;
  color: #d14;
  background-color: #f9f2f4;
}

#header .nav ul li a span i.menu_arrow {
  margin-right: 0;
  margin-left: 1px;
}

.items a:nth-of-type(n + 25) {
  display: none;
}

#continar-left .log-text a {
  margin: 0 2px;
}

/* 文章页table */
#continar-left table {
  width: 100%;
}
#continar-left table th,
#continar-left table td {
  padding: 0 2px;
  line-height: 2.6em;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* 雪花start */

@keyframes snow {
  0% {
    background-position: 0 0, 15vw -100px, 20vw -200px;
  }

  100% {
    background-position: 15vw 100vh, 30vw 100vh, 50vw 100vh;
  }
}

#snowMask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none\0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.snow_size,
.snow_size1 {
  background: url('../images/snow1.png');
  animation: 10s snow linear infinite;
}

.snow_size2 {
  background: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
  animation: 8s snow linear infinite;
}

.snow_size3 {
  background: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
  animation: 6s snow linear infinite;
}

/* 雪花end */

/* 雨水start */
.rain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 55px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
  /* border: 1px solid greenyellow; */
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }

  75% {
    transform: translateY(90vh);
  }

  100% {
    transform: translateY(100vh);
  }
}

.stem {
  width: 1px;
  height: 100%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }

  65% {
    opacity: 1;
  }

  75% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

.snow {
  position: absolute;
  width: 50px;
  height: 50px;
  pointer-events: none;
  background: url('../images/snow_big.png') no-repeat center center;
  animation: 2s rain_snow linear infinite;
}

.snow:nth-of-type(2n) {
  background: url('../images/snow_mini.png') no-repeat center center;
}

@keyframes rain_snow {
  0% {
    transform: translate(0vw, 0vh);
  }

  100% {
    transform: translate(15vw, 100vh);
  }
}

.splat {
  width: 15px;
  height: 10px;
  border-top: 2px dotted rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }

  80% {
    opacity: 1;
    transform: scale(0);
  }

  90% {
    opacity: 0.5;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
/* 雨水end */

/* 闪电start */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 998;
  pointer-events: none;
}
/* 闪电end */
